<template>
  <!-- 支付弹窗 -->
  <div class="pay-popup">
    <van-popup
      v-model="show"
      position="bottom"
      round
    >
      <ul class="pay-select">
        <li :class="{selected: checked === 0}" @click="checked=0">
          <i class="icon-wx"></i>
          微信支付
          <i class="icon-checked"></i>
        </li>
        <li :class="{selected: checked === 1}" @click="checked=1">
          <i class="icon-ali"></i>
          支付宝
          <i class="icon-checked"></i>
        </li>
      </ul>
      <div class="confirm-pay">
        <van-button
          @click="confirmPay"
          block>确认支付</van-button>
        </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'user-pay-popup',
  data() {
    return {
      show: this.showPopup,
      checked: 0,
    };
  },
  props: {
    showPopup: {
      type: Boolean,
      default: false,
    }
  },
  created() {

  },
  methods: {
    confirmPay() {
      this.$emit('confirm-pay', { checked: this.checked });
    }
  }
};
</script>

<style lang="less">
  .pay-popup{
    .van-popup{
      bottom: 40px;
      left: 40px;
      right: 40px;
      width: auto;
      border-radius:20px !important;
      padding: 90px 50px 40px;
    }
  }
  .pay-select{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon-checked{display: none;}
    li{
      width:244px;
      height:92px;
      line-height:92px;
      background:#f8f8f8;
      border-radius:20px;
      font-weight:bold;
      font-size:@font-size-md;
      border: 2px solid #f8f8f8;
      text-align: center;
      position: relative;
      color:#666;
    }
    .selected{
      color:#333;
      border-color: @orange;
      .icon-checked{display: block;}
    }
  }
  .icon-wx{background: url('../assets/images/pay-wx@2x.png') no-repeat;}
  .icon-ali{background: url('../assets/images/pay-ali@2x.png') no-repeat;}
  .icon-checked{background: url('../assets/images/pay-check@2x.png') no-repeat;}
  .icon-wx,
  .icon-ali{
    display:inline-block;
    vertical-align:middle;
    width: 40px;
    height: 40px;
    background-size: contain;
  }
  .icon-checked{
    position:absolute;
    right: -8px;
    bottom: -8px;
    z-index: 1;
    width: 34px;
    height: 34px;
    background-size: contain;
  }
  .confirm-pay{
    .van-button{
      background: #FBB111;
      margin-top: 70px;
      border-radius:20px;
      font-size:@font-size-lg;
      font-weight:bold;
      height: 90px;
      line-height: 90px;
      color: #fff;
    }
  }
</style>
